<template>
  <div class="jobs-publish-position-picker">
    <!-- 头部 -->
    <div class="top">
      <p>
        <button type="button" @click="onCancel">取消</button>
        <span>选择职能类别</span>
        <button type="button" @click="onSubmit">确认</button>
      </p>
      <van-search
        v-model="kw"
        shape="round"
        placeholder="请输入搜索关键词"
        style="border-bottom: 0.5px solid #e8e8e8"
        @search="onZNSearch"
      />
    </div>

    <!-- 结果 -->
    <ul class="result" v-if="list_searchResult.length > 0">
      <li
        v-for="(item, index) in list_searchResult"
        :key="index"
        @click="onThreeClick(item)"
      >
        <p v-html="item.value.replace(kw, '<span>' + kw + '</span>')"></p>
        <p>{{ item.title }}</p>
      </li>
    </ul>

    <!-- 选项 -->
    <div class="branch" v-else>
      <!-- =一级 -->
      <ul class="first">
        <li
          v-for="(item, index) in list_one"
          :key="index"
          @click="onOneClick(item)"
        >
          {{ item.value }}
        </li>
      </ul>

      <div
        class="shade"
        @click="isSel_one = false"
        v-if="isSel_one === true"
      ></div>

      <div class="popu" v-if="isSel_one === true">
        <!-- 二级 -->
        <ul class="second">
          <li
            :class="{ select: sel_two_id === item.id }"
            v-for="(item, index) in list_two"
            :key="index"
            @click="onTwoClick(item)"
          >
            {{ item.value }}
          </li>
        </ul>

        <!-- 三级 -->
        <ul class="three">
          <li
            :class="{ select: sel_three_id === item.id }"
            v-for="(item, index) in list_three"
            :key="index"
            @click="onThreeClick(item)"
          >
            {{ item.value }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Toast } from "vant";
import { GetJobZNOne, GetJobZNTwo, GetJobZNThree } from "@/util/selectData";
import Global from "@/Global";
export default {
  name: "CommonZNSelect",
  components: {
    [Search.name]: Search,
  },
  props: ["selectCount", "userType"],
  // 定义属性
  data() {
    return {
      kw: "",
      list_searchResult: [], //搜索结果

      list_one: GetJobZNOne(),
      list_two: [],

      isSel_one: false, //是否选了大类
      sel_two_id: "", //选中的中类id
      sel_three_id: "", //选中的小类id
      selected_list: [],
    };
  },
  computed: {
    list_three() {
      let arr = [];
      if (this.userType === "c") {
        arr = GetJobZNThree().filter((item) => {
          return (
            item.id.substring(0, 4) === this.sel_two_id && item.value != "所有"
          );
        });
      }
      return arr;
    },
  },
  // 方法集合
  methods: {
    onOneClick(item) {
      let id = item.id;
      this.isSel_one = true;
      this.list_two = GetJobZNTwo().filter((item) => {
        return item.id.substring(0, 2) === id;
      });

      let two_data = this.list_two[0];
      this.sel_two_id = two_data.id;
      this.sel_three_id = "";
      this.selected_list = [];
    },
    onTwoClick(item) {
      this.sel_two_id = item.id;
      this.sel_three_id = "";
      this.selected_list = [];
    },
    onThreeClick(item) {
      if (item.value == "其他" || item.value == "所有") {
        let two_data = GetJobZNTwo().filter((i) => {
          return i.id === item.id.substring(0, 4);
        })[0];
        item.value = two_data.value + "->" + item.value;
      }

      this.sel_three_id = item.id;
      this.selected_list.push(item);
      this.$bus.$emit(Global.bus_common_CommonZNSelect_submit, item);
    },
    //搜索职能
    onZNSearch(val) {
      this.list_searchResult = [];
      if (val === "") {
        return;
      }
      if (val === "所有" || val === "其他") {
        Toast("搜索不到该岗位");
        return;
      }
      let array_result = GetJobZNThree().filter((item) => {
        return item.value.indexOf(val) >= 0;
      });
      if (array_result.length > 0) {
        let array_one = GetJobZNOne();
        let array_two = GetJobZNTwo();
        array_result.forEach((item) => {
          let item_tow = array_two.filter((i) => {
            return i.id === item.id.substr(0, 4);
          })[0];
          let item_one = array_one.filter((i) => {
            return i.id === item.id.substr(0, 2);
          })[0];

          item.title = `${item_one.value}-${item_tow.value}`;
        });
        this.list_searchResult = array_result;
        // console.log(this.list_searchResult);
      } else {
        Toast("搜索不到该岗位");
        return;
      }
    },
    onCancel() {
      this.$bus.$emit(Global.bus_common_CommonZNSelect_cancel, "1");
    },
    onSubmit() {
      let list = this.selected_list;
      if (parseInt(this.selectCount) != list.length) {
        Toast("请选择职能");
        return;
      }
    },
  },
};
</script>

<style scoped></style>
